{% block sw_media_upload_v2 %}
<div
    class="sw-media-upload-v2 sw-product-variants-media-upload"
    :class="{ 'is--disabled': disabled }"
>
    {% block sw_product_variants_media_upload_content %}
    <div class="sw-media-upload-v2__content">
        {% block sw_product_variants_media_upload_drop_zone %}
        <div
            ref="dropzone"
            class="sw-media-upload-v2__dropzone"
        >
            <div class="sw-product-variants-media-upload__preview-images">
                {% block sw_product_variants_media_upload_cover_preview %}
                <div
                    v-if="product.cover || cover"
                    class="sw-product-variants-media-upload__preview-cover"
                >
                    {% block sw_product_variants_media_upload_cover_image %}
                    <sw-media-preview-v2
                        class="sw-product-variants-media-upload__cover-image"
                        :source="coverImageSource"
                    />
                    {% endblock %}
                </div>
                <div
                    v-else-if="source.media.length > 0"
                    class="sw-product-variants-media-upload__preview-cover"
                >
                    {% block sw_product_variants_media_upload_cover_image_empty %}
                    <sw-media-preview-v2
                        class="sw-product-variants-media-upload__cover-image"
                        :source="null"
                    />
                    {% endblock %}
                </div>
                {% endblock %}

                {% block sw_product_variants_media_upload_preview %}
                <div
                    class="sw-product-variants-media-upload__images"
                    :class="{ 'is--compact--button': mediaSource.length > 2 }"
                >
                    <div
                        v-for="(item, index) in mediaSource"
                        :key="index"
                        class="sw-product-variants-media-upload__image"
                    >
                        {% block ssw_product_variants_media_upload_content_preview_file %}
                        <sw-media-preview-v2
                            :key="item.id"
                            class="sw-media-upload-v2__preview"
                            :class="{ 'is--cover': isCover(item), 'is--disabled': disabled }"
                            :source="item.media && item.productId ? item.media : item.mediaId"
                        />
                        {% endblock %}

                        {% block sw_product_variants_media_upload_action_buttons %}
                        <sw-context-button
                            class="sw-product-variants-media-upload__context-button"
                            :disabled="disabled"
                        >
                            {% block sw_product_variants_media_upload_context %}
                            {% block sw_product_variants_media_upload_context_cover_action %}
                            <sw-context-menu-item
                                v-if="!isCover(item)"
                                @click="markMediaAsCover(item)"
                            >
                                {{ $tc('global.sw-product-image.context.buttonAsCover') }}
                            </sw-context-menu-item>
                            {% endblock %}

                            {% block sw_product_variants_media_upload_context_preview_action %}
                            <sw-context-menu-item @click="previewMedia(item)">
                                {{ $tc('global.sw-product-image.context.buttonPreviewImage') }}
                            </sw-context-menu-item>
                            {% endblock %}

                            {% block sw_product_variants_media_upload_context_delete_action %}
                            <sw-context-menu-item
                                variant="danger"
                                @click="removeMedia(item)"
                            >
                                {{ $tc('global.sw-product-image.context.buttonRemove') }}
                            </sw-context-menu-item>
                            {% endblock %}
                            {% endblock %}
                        </sw-context-button>
                        {% endblock %}
                    </div>
                </div>
                {% endblock %}
            </div>
            {% block sw_product_variants_media_upload_actions %}
            <div class="sw-media-upload-v2__actions">
                {% block sw_product_variants_media_upload_actions_regular %}
                <div
                    v-if="mediaSource.length <= 2"
                    class="sw-product-variants-media-upload__regular-button"
                >
                    {% block sw_product_variants_media_upload_actions_regular_upload_button %}
                    <mt-button
                        class="sw-media-upload-v2__button upload"
                        :disabled="disabled"
                        ghost
                        size="small"
                        variant="secondary"
                        @click="onClickUpload"
                    >
                        {{ $tc('global.sw-media-upload-v2.buttonFilesUpload') }}
                    </mt-button>
                    {% endblock %}

                    {% block sw_product_variants_media_upload_actions_regular_open_button %}
                    <mt-button
                        variant="primary"
                        :disabled="disabled"
                        class="sw-product-variants-media-upload__browse-button"
                        @click="showMediaModal = true"
                    >
                        <mt-icon
                            class="sw-product-variants-media-upload__browse-icon"
                            name="regular-image"
                        />
                    </mt-button>
                    {% endblock %}
                </div>
                {% endblock %}

                {% block sw_product_variants_media_upload_actions_compact %}
                <div
                    v-else
                    class="sw-product-variants-media-upload__compact-button"
                >
                    <mt-button
                        variant="primary"
                        :disabled="disabled"
                        square
                        ghost
                        size="small"
                        class="sw-product-variants-media-upload__browse-button"
                    >
                        <mt-icon
                            class="sw-product-variants-media-upload__browse-icon"
                            name="regular-plus"
                            size="12px"
                        />
                    </mt-button>
                    <sw-context-button
                        class="sw-product-variants-media-upload__context-button"
                        :disabled="disabled"
                    >
                        {% block sw_product_variants_media_upload_actions_compact_button_context %}
                        {% block sw_product_variants_media_upload_actions_compact_button_context_upload_action %}
                        <sw-context-menu-item @click="onClickUpload">
                            {{ $tc('global.sw-media-upload-v2.buttonFilesUpload') }}
                        </sw-context-menu-item>
                        {% endblock %}

                        {% block sw_product_variants_media_upload_actions_compact_button_context_open_action %}
                        <sw-context-menu-item @click="showMediaModal = true">
                            {{ $tc('global.sw-media-upload-v2.buttonOpenMedia') }}
                        </sw-context-menu-item>
                        {% endblock %}
                        {% endblock %}
                    </sw-context-button>
                </div>
                {% endblock %}
            </div>
            {% endblock %}
        </div>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_product_variants_media_upload_file_input %}
    <form
        ref="fileForm"
        class="sw-media-upload-v2__form"
    >
        <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
        <input
            :key="source.id"
            ref="fileInput"
            class="sw-media-upload-v2__file-input"
            type="file"
            :accept="fileAccept"
            :multiple="multiSelect"
            @change="onFileInputChange"
        >
    </form>
    {% endblock %}

    {% block sw_product_variants_media_upload_actions_media_modal %}
    <sw-media-modal-v2
        v-if="showMediaModal"
        :initial-folder-id="mediaDefaultFolderId"
        :entity-context="product.getEntityName()"
        @modal-close="showMediaModal = false"
        @media-modal-selection-change="onAddMedia"
    />
    {% endblock %}

    {% block sw_product_variants_media_upload_listener %}
    <sw-upload-listener
        auto-upload
        :upload-tag="uploadTag"
        @media-upload-finish="onUploadMediaSuccessful"
        @media-upload-fail="onUploadMediaFailed"
    />
    {% endblock %}

    {% block sw_product_variants_media_upload_preview_modal %}
    <sw-image-preview-modal
        v-if="showPreviewModal"
        :active-item-id="activeItemId"
        :media-items="mediaSource"
        @modal-close="onClosePreviewModal"
    />
    {% endblock %}
</div>
{% endblock %}
